<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <h2>{{fullName}}</h2> 
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:'cxcxc',
                fullName:'',
                obj:{
                    a:'xsds'
                }
            },
                            //计算属性香在一个方法能监听很多属性，watch只能监听一个
                //计算属性：可以使用较少的代码实现比较复杂的功能，可以用一个方法监听多个属性；只是不支持异步
            watch: {
                //监听：这里的属性都是i已存在的属性
                //可以写异步
                //但是要每个属性都写进去，而computed直接写一个方法把依赖写进去就会变化
                name(newVal,oldVal){
                    //只要name发生改变就会执行
                    console.log('abc') 
                },
                'obj.a':{
                    handler(newVal){
                        console.log('newval'+newVal)
                    }
                },
                obj:{
                    deep:true,//深度监听，可以监听对象中的所有属性
                    immediate:true,//默认是false，初始化赋值的时候就触发函数
                    handler(){
                        console.log(this.obj.a)
                    }
                }
            },
        })
    </script>
</body>
</html>